<template>
    <Tags v-if="props.list[activeIndex]" :tags="props.list[activeIndex].tag_info" />
    <el-carousel :interval="4000" type="card" height="200px" @change="onChangeCarousel">
        <el-carousel-item v-for="(item, index) in props.list" :key="index">
            <el-image :src="props.type === 'video' ? getVideoThumb(item.url) : item.url" fit="contain" class="bg-img">
                <template #error>
                    <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                    </div>
                </template>
            </el-image>
            <div v-if="type === 'video'" class="shade" @click="onPlay(item)"></div>
        </el-carousel-item>
    </el-carousel>
    <div v-if="props.list[activeIndex]" class="info-box">
        <p class="title">{{ props.list[activeIndex].name || '--' }}</p>
        <p v-if="props.type == 'video'" class="desc">{{ props.list[activeIndex].desc || '--' }}</p>
        <ul class="browse_box">
            <li>
                <div>
                    浏览时间：<span>{{ props.list[activeIndex]?.browse_time }}</span>
                </div>
                <div>
                    浏览时长：<span>{{ props.list[activeIndex]?.browse_duration }}</span>
                </div>
            </li>
            <li>
                <div>
                    分享人：<span>{{ props.list[activeIndex]?.sharer }}</span>
                </div>
                <div>
                    浏览人：<span>{{ props.list[activeIndex]?.viewer }}</span>
                </div>
            </li>
        </ul>
    </div>

    <Video ref="video" />
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getVideoThumb } from '@/utils/utils';
import Tags from './Tags.vue';
import Video from './Video.vue';

const props = defineProps<{
    type: string;
    list: Array<{
        name: string;
        desc: string;
        tag_info: object[];
        browse_time: string;
        browse_duration: string;
        sharer: string;
        yar;
        url: string | undefined;
    }>;
}>();
// const props = defineProps(['type', 'list'])

const video = ref();
const activeIndex = ref(0);

const onChangeCarousel = (e: any) => {
    activeIndex.value = e;
};

const onPlay = (e: any) => {
    video.value.videoCheck = true;
    video.value.videoUrl = e.url;
};
</script>

<style lang="scss" scoped>
.el-carousel {
    margin-top: 25px;

    .el-carousel__item {
        background: rgba($color: #000, $alpha: 40%);

        .shade {
            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('@/assets/icon/play.icon1.png') no-repeat center center / 50px 50px;
        }
    }

    .bg-img {
        width: 100%;
        height: 200px;

        .image-slot {
            .el-icon {
                font-size: 36px;
            }
        }
    }
}

.info-box {
    p {
        margin: 0;
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;

        .title {
            font-size: 18px;
            font-weight: 500;
        }

        .desc {
            font-size: 14px;
            font-weight: 300;
            color: #969696;
        }
    }

    .browse_box {
        margin: 10px auto;
        width: 500px;

        li {
            display: flex;

            // margin-top: 10px;
            height: 30px;

            div {
                width: 250px;
                text-align: left;
                font-size: 14px;
                line-height: 30px;
                font-weight: 300;
                color: #33302d;
            }
        }
    }
}
</style>
